<template>
    <div>
      <h1>{{ message }}</h1>
      <div class="intro">
        <div>
          <p style='color:red'>你还有<a href='#'>{{ tasks.length }}</a>个待办事项未完成, 有<a href='#'>0</a>个任务已经过期了, 有时间的话，赶紧去做吧!</p>
        </div>
      </div>
  
      <input type="text" class="taskInput" v-model="newTask" placeholder="把计划写下来吗?" @keyup.enter="addTask" />
      <button @click="addTask">添加</button>
  
      <div class="priority">
        <div>
          <input type="radio" value="重要" v-model="priority">重要
          <input type="radio" value="一般" v-model="priority">一般
          <input type="radio" value="低" v-model="priority">低
        </div>
        <p>任务优先级：{{ priority }}</p>
      </div>
  
      <div>任务列表</div>
      <template v-if="tasks.length > 0">
        <ul>
          <li v-for="(task, index) in tasks" :key="index">
            <div class="yuan" :class="{'red': task.priority == '重要', 'blue': task.priority == '一般', 'green': task.priority == '低'}"></div>
            <div class="task-text" v-if="!task.editing">{{ task.text }}</div>
            <input v-else type="text" v-model="task.text" />
            <div class="actions">
              <span class="edit" @click="toggleEdit(task)">
                {{ task.editing ? "保存" : "编辑" }}
              </span>
              <span class="delete" @click="deleteTask(index)">删除</span>
            </div>
          </li>
        </ul>
      </template>
      <template v-else>
        <p>还没有任务哦~</p>
      </template>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const message = ref("你的待办事项");
      const newTask = ref("");
      const priority = ref("一般");
      const tasks = ref([
        { text: "学习前端基础H5/CSS3/JS", editing: false, priority: "一般" },
        { text: "学习Vue.JS的基础知识", editing: false, priority: "重要" },
        { text: "学习前端构建工具", editing: false, priority: "一般" },
        { text: "学习前端UI构建", editing: false, priority: "重要" },
        { text: "学习前端状态管理", editing: false, priority: "一般" },
        { text: "学习前端路由管理", editing: false, priority: "一般" },
        { text: "学习前端网络管理", editing: false, priority: "低" },
        { text: "综合案例实战", editing: false, priority: "一般" },
      ]);
  
      const addTask = () => {
        if (newTask.value.trim() !== "") {
          tasks.value.push({ text: newTask.value.trim(), editing: false, priority: priority.value });
          newTask.value = "";
        }
      };
  
      const toggleEdit = (task) => {
        task.editing = !task.editing;
      };
  
      const deleteTask = (index) => {
        if (confirm("确定要删除这个任务吗?")) {
          tasks.value.splice(index, 1);
        }
      };
  
      const imageUrl = ref("04img_1.png");
  
      return {
        message,
        newTask,
        priority,
        tasks,
        addTask,
        toggleEdit,
        deleteTask,
        imageUrl
      };
    }
  };
  </script>
  
  <style>

  </style>